<script setup>
defineProps({
  text: {
    type: String,
    default: '暂无数据',
  },
})
</script>

<template>
  <section class="ui-empty">
    <div class="ui-empty__wrap">
      <slot name="icon">
        <i i-svg-empty />
      </slot>
      <slot>
        <p>{{ text }}</p>
      </slot>
    </div>
  </section>
</template>

<style lang='scss' scoped>
.ui-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;

  &__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    i {
      font-size: 52px;
      opacity: 0.8;
    }

    p {
      margin-top: 16px;
      font-size: 14px;
      color: #d9d9d9;
    }
  }
}
</style>
